<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='items_form'>
		<h:head>
			<style type="text/css" title="currentStyle">
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools_JUI.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/global.css";
				@import "${facesContext.externalContext.requestContextPath}/views/management/css/items.css";
			</style>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/jquery.dataTables.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/ZeroClipboard.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/TableTools.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.bgiframe-2.1.2.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.core.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.widget.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.mouse.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.button.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.draggable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.position.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.resizable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.dialog.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.effects.core.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/items.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
			
			<script type="text/javascript" charset="utf-8">
			//<![CDATA[
				var asInitVals = new Array();
				var oTable;
				var aoColumnsVal='';
				for(var i=0; i < #{itemsBean.columnsSize};i++)
				{
					aoColumnsVal =aoColumnsVal+ 'null,';
				}
				aoColumnsVal += 'null';
				$(document).ready( function () {
					oTable = $('#table').dataTable( {
						"sScrollY": 400,
						"bJQueryUI": true,
						"sPaginationType": "full_numbers",
						"sDom": 'T<"clear">lfrtip',
						"oTableTools": {
							"sSwfPath": "${facesContext.externalContext.requestContextPath}/resources/swf/datatable/copy_csv_xls_pdf.swf",
							"sRowSelect": "single",
							
							"aButtons": [ "copy", 
							 	             {
								"sExtends": "collection",
								"sButtonText": "Save",
								"aButtons": [ "csv", "xls", "pdf", "print" ]
							 }
							]
						
						},
						#{itemsBean.tableData}
					} );
					
					$("tfoot input").keyup( function () {
				        /* Filter on the column (the index) of this element */
				        oTable.fnFilter( this.value, $("tfoot input").index(this) );
				    } );
				     
				    /*
				     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
				     * the footer
				     */
				    $("tfoot input").each( function (i) {
				        asInitVals[i] = this.value;
				    } );
				     
				    $("tfoot input").focus( function () {
				        if ( this.className == "search_init" )
				        {
				            this.className = "";
				            this.value = "";
				        }
				    } );
				     
				    $("tfoot input").blur( function (i) {
				        if ( this.value == "" )
				        {
				            this.className = "search_init";
				            this.value = asInitVals[$("tfoot input").index(this)];
				        }
				    } );
				    
				    
				    
				    
				    $("#dialog_form_edit")
					.dialog(
					{
						autoOpen : false,
						height : 500,
						width : 600,
						modal : true,
						buttons : {
							"Open" : function() {
								
								var editItemCode = $("[id='items_form:edit_item_code']").val();
								var editItemName = $("[id='items_form:edit_item_name']").val();
								var editItemDescription = $("[id='items_form:edit_item_description']").val();
								var editPrice = $("[id='items_form:edit_price']").val();
								var editOrigLocation = $("[id='items_form:edit_orig_location']").val();
								var editCategory = $("[id='items_form:edit_category']").val();
								var editIcon = $("[id='items_form:edit_icon']").val();
								var editAttribute = $("[id='items_form:edit_attributes']").val();
								var editSuspended = $("[id='items_form:edit_suspended']").val();
								
								
								
								$("[id='items_form:selected_item_code']").val(editItemCode);
								$("[id='items_form:selected_item_name']").val(editItemName);
								$("[id='items_form:selected_item_description']").val(editItemDescription);
								$("[id='items_form:selected_price']").val(editPrice);
								$("[id='items_form:selected_orig_location']").val(editOrigLocation);
								$("[id='items_form:selected_category']").val(editCategory);
								$("[id='items_form:selected_icon']").val(editIcon);
								$("[id='items_form:selected_attributes']").val(editAttribute);
								$("[id='items_form:selected_suspended']").val(editSuspended);
								
								$('[id="items_form:edit_btn"]').click();
								
							},
							"Delete" : function() {
								
								var editItemCode = $("[id='items_form:edit_item_code']").val();
								var r = confirm("Are you sure to delete Item: "
										+ editItemCode + "?");
								if (r != true) {
									return false;
								} else {
									return true;
								}
								
								$("[id='items_form:selected_item_code']").val(editItemCode);
								$('[id="items_form:delete_btn"]').click();
								
							},
							Cancel : function() {
								$(this).dialog("close");
							}

						},
						close : function() {
						}
					});
				    
				    thumbnailDisplay();
				    
				} );
				
				
				
				//]]>
			</script>

		</h:head>
		<body>
			<div>
			
			<ui:include src="../../views/header/header.xhtml" />

			<br />
			<br />
			<br />
			
			
			</div>
			
			<div id="buttons_div">
			 	<h:commandButton id="create_item_btn" value="Create Item" action="#{itemsBean.createItemAction}">
			 	</h:commandButton>
				<button onclick="return okOnClick()">#{msg.edit_delete}</button>
				
				<h:commandButton id="test_btn" value="test" action="#{itemsBean.testAction}">
			 	</h:commandButton>
				<br />
				<br />
				<br />
			</div>
			<div id="items_hidden_div" class="hidden_input">
				
				<br/>
				
				<h:inputText id="selected_value" value="#{itemsBean.selectedValue}">
				</h:inputText>
				<h:inputText id="selected_item_code" value="#{itemsBean.editItemCode}">
				</h:inputText>
				<h:inputText id="selected_item_name" value="#{itemsBean.editItemName}">
				</h:inputText>
				<h:inputText id="selected_item_description" value="#{itemsBean.editItemDescription}">
				</h:inputText>
				<h:inputText id="selected_brand" value="#{itemsBean.editBrand}">
				</h:inputText>
				<h:inputText id="selected_price" value="#{itemsBean.editPrice}">
				</h:inputText>
				<h:inputText id="selected_orig_location" value="#{itemsBean.editOrigLocation}">
				</h:inputText>
				<h:inputText id="selected_category" value="#{itemsBean.editCategory}">
				</h:inputText>
				<h:inputText id="selected_icon" value="#{itemsBean.editIcon}">
				</h:inputText>
				<h:inputText id="selected_attributes" value="#{itemsBean.editAttributes}">
				</h:inputText>
				<h:inputText id="selected_suspended" value="#{itemsBean.editSuspended}">
				</h:inputText>
				
				<br/>
				<h:commandLink id="edit_btn" value="#{msg.edit}"
					action="#{itemsBean.openItemAction}">
					<f:setPropertyActionListener target="#{itemBean.itemService}" value="#{itemService}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.locationService}" value="#{locationService}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.categoryService}" value="#{categoryService}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.itemCode}" value="#{itemsBean.editItemCode}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.itemName}" value="#{itemsBean.editItemName}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.itemDescription}" value="#{itemsBean.editItemDescription}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.brand}" value="#{itemsBean.editBrand}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.price}" value="#{itemsBean.editPrice}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.origLocation}" value="#{itemsBean.editOrigLocation}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.category}" value="#{itemsBean.editCategory}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.icon}" value="#{itemsBean.editIcon}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.attribute}" value="#{itemsBean.editAttributes}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.suspended}" value="#{itemsBean.editSuspended}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{itemBean.parentBean}" value="#{itemsBean.currentBean}"></f:setPropertyActionListener>
				</h:commandLink>
				
				<h:commandLink id="delete_btn" value="#{msg.delete}"
					action="#{itemsBean.deleteItemAction}">
				</h:commandLink>
				
				<h:commandLink id="create_btn" value="#{msg.create}"
					action="#{itemsBean.createItemAction}">
				</h:commandLink>
				
			</div>

			<div id="demo">
				<table id="table" class="display">
                	
                    <thead>
						<tr>
							<ui:repeat value="#{itemsBean.columnNames}" var="columnName">
								<th><h:outputText value="#{columnName}"/></th>
							</ui:repeat>
						</tr>
					
					</thead>
                     
                     <tbody>
                     </tbody>
                     <tr></tr>
                    <tfoot>
                   
                    	<tr>
							<ui:repeat value="#{itemsBean.columnNames}" var="columnName">
								<th><input type="text"  value="Search #{columnName}" class="search_init" /></th>
							</ui:repeat>
						</tr>
					
					</tfoot>
					
				</table>
			
			</div>
			
			
			
			<div id="dialog_form_edit" title="Edit item">
				<h1></h1>
				<table>
					<tr>
						<td><h:outputLabel value="#{msg.item_code}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_item_code" value="#{itemsBean.editItemCode}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_name}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_item_name" value="#{itemsBean.editItemName}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_description}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_item_description" value="#{itemsBean.editItemDescription}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="Brand">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_brand" value="#{itemsBean.editBrand}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_price}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_price" value="#{itemsBean.editPrice}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_orig_location}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_orig_location" value="#{itemsBean.editOrigLocation}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_category}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_category" value="#{itemsBean.editCategory}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_icon}">
							</h:outputLabel></td>
						<td>
					 
					    <!-- 
					    <h:inputText id="edit_icon" value="#{itemsBean.editIcon}" disabled="true">
						</h:inputText>
					    
					     -->
						 
						<h:graphicImage id="item_image" value="#{itemsBean.editIcon}"></h:graphicImage>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.item_attributes}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_attributes" value="#{itemsBean.editAttributes}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td>
							<h:outputLabel value="#{msg.item_suspended}" >
							</h:outputLabel></td>
						<td>
							<h:inputText id="edit_suspended" value="#{itemsBean.editSuspended}" disabled="true">
							</h:inputText>
						</td>
					</tr>


				</table>
			</div>
			
			
			<ui:include src="../../views/footer/footer.xhtml" />
		</body>


	</h:form>
</f:view>
</html>
